<template>
  <div class="person2">
    姓<input v-model="firstName"><br>
    名<input v-model="lastName"><br>
    全名<span>{{ fullName }}</span>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Person2'
}
</script>


<script setup lang="ts">
import {computed, ref} from "vue";

let firstName = ref("张");
let lastName = ref("港");
// computed 函数，是计算属性基于其他响应式状态（如 ref 或 reactive）自动计算和更新的值。
let fullName = computed(() => {
  return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + "-" + lastName.value;
});
</script>

<style scoped>
.person2 {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>